<template>
  <div>
    <div v-if="shows == 'list'">
      <Header>
        <el-button size="small" type="primary" @click="add">
          新建活动
        </el-button>
      </Header>
      <Main :data="listData" :footer-lock="totals > 10">
        <el-table-column
          label="活动ID"
          align="center"
          property="title_time"
        ></el-table-column>
        <el-table-column
          label="活动名称"
          align="center"
          property="title"
        ></el-table-column>
        <el-table-column label="活动时间" align="center" width="350">
          <template slot-scope="scope">
            {{ scope.row.stime }} 至 {{ scope.row.etime }}
          </template>
        </el-table-column>
        <el-table-column
          label="参与人数"
          align="center"
          property="nums"
        ></el-table-column>
        <el-table-column
          label="奖品名额"
          align="center"
          property="prize_number"
        ></el-table-column>
        <el-table-column label="中奖方式" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.is_way == 0">系统计算</span>
          </template>
        </el-table-column>
        <el-table-column label="活动状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0" style="color:#E6A23C;"
              >未开始</span
            >
            <span v-if="scope.row.type == 1" style="color:#67C23A;"
              >进行中</span
            >
            <span v-if="scope.row.type == 2" style="color:#F56C6C;"
              >已结束</span
            >
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.type == 2"
              @click="end(scope.row.hot_id)"
            >
              提前结束
            </el-button>
            <el-button size="mini" type="text" @click="msg(scope.row.hot_id)">
              详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.type != 0"
              @click="edit(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </Main>

      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>
    <Add v-if="shows == 'add'" :data-val="dataVal" @out="out" />
    <Msg v-if="shows == 'msg'" :hot-id="hotId" @out="out" />
  </div>
</template>
<script>
import { PRIZEACTIVITYLIST, ADVANCEEND } from "../service";

export default {
  components: {
    Add: () => import("./form"),
    Msg: () => import("./msg")
  },
  data() {
    return {
      shows: "list",
      listData: [],
      totals: 0,
      pages: 1,
      dataVal: {},
      hotId: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    add() {
      this.shows = "add";
    },
    msg(id) {
      this.shows = "msg";
      this.hotId = id;
    },
    edit(v) {
      this.shows = "add";
      this.dataVal = v;
    },
    out() {
      this.shows = "list";
      this.dataVal = {};
      this.getList();
    },
    async end(id) {
      await this.$confirm("是否提前结束?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        ADVANCEEND({ hot_id: id }).then(res => {
          let { code, msg } = res;
          if (code === 200) {
            this.msg(id);
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      });
    },
    async getList() {
      await PRIZEACTIVITYLIST({
        page: this.pages,
        pageshow: 10
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.listData = data.list;
          this.totals = data.count;
        } else {
          this.$message.error(msg);
          this.listData = [];
        }
      });
    },

    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
